<template>
  <!--转供策略-->
  <el-row style="height: 48vh;margin-bottom: 20px">
    <el-table :data="feederData.slice((pager.pageNum - 1) * pager.pageSize, pager.pageNum * pager.pageSize)"
      style="width: 100%;--el-table-border-color: none;" :row-class-name="getClassName"
      :header-cell-style="customHeaderCell" :cell-style="customCell">
      <el-table-column type="index" label="序号" align="center" width="80" />
      <el-table-column prop="treated" align="center" label="失电馈线" />
      <el-table-column prop="target" align="center" label="转供馈线" />
      <el-table-column prop="treatedPercent" align="center" :width="150" label="动作前负载率(%)" />
      <el-table-column prop="targetPercent" align="center" :width="150" label="动作后负载率(%)" />
      <el-table-column prop="recoverLoad" align="center" :width="150" label="恢复功率(MW)" />
    </el-table>

    <div style="display: flex; justify-content: end;width: 100%">
      <el-pagination small background layout="total,prev, pager, next" :total="feederData.length"
        style="margin-top: 15px" @sizeChange="val => pager.pageSize = val" @currentChange="val => pager.pageNum = val">
        <template #total="scope">
          共 {{ scope.total }} 条
        </template>
      </el-pagination>
    </div>
  </el-row>
  <el-row style="height: 40vh" :gutter="20">
    <el-col :span="6">
      <ul class="warning-list">
        <li class="warning-title">预警信息</li>
        <li class="warning-item" v-for="(item, key) in waringMessageData" :key="key">
          <el-tooltip effect="light" :content="item" placement="top">
            <span> {{ item }}</span>
          </el-tooltip>
        </li>
      </ul>
    </el-col>
    <el-col ref="chartFatherRef" :span="18">
      <div id="chart"></div>
    </el-col>

  </el-row>

</template>

<script setup>
import * as echarts from 'echarts';
import { ref, watchEffect } from 'vue';

const props = defineProps({
  feederData: Array,
  stationData: Object,
  waringMessageData: Array
})

const pager = ref({
  pageNum: 1,
  pageSize: 10,
})

const { feederData, stationData, waringMessageData } = props;

const chartFatherRef = ref(null);


const charts = async (data) => {
  const chartDom = document.getElementById('chart');

  const width = chartFatherRef.value ? chartFatherRef.value.$el.offsetWidth : undefined;
  const height = chartFatherRef.value ? chartFatherRef.value.$el.offsetHeight : undefined;
  // 获取加载图表的容器
  if (chartDom) {
    const chart = echarts.init(chartDom, null, {
      width: width,
      height: height,
      renderer: 'svg'
    });

    // 绘制echarts
    chart.setOption({
      title: {
        text: '电网统计量',
        left: "center",
        textStyle: {
          color: '#fff',
          fontSize: '14px'
        }
      },
      xAxis: {
        data: data.branch,
        axisLabel: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#fff',
            opacity: 0.7
          }
        },
        dataZoom: [{
          type: 'slider', // 缩放条类型
          xAxisIndex: 0, // 对应的 x 轴索引
          start: 0, // 缩放起始位置（百分比）
          end: 100, // 缩放结束位置（百分比）\
          orient: 'horizontal', // 设置为横向
          inside: true // 在图表内部显示
        }],
        axisTick: {
          lineStyle: {
            color: '#fff',
            opacity: 0.2
          }
        }
      },
      yAxis: {
        type: 'value',
        min: 0,
        // max: 100,
        axisLabel: {
          formatter: `{value} %`,
          color: '#fff',
        },
      },
      legend: {
        show: true,
        right: 'auto',
        top: '30',
        textStyle: {
          color: "#fff"
        }
      },
      tooltip: {
        trigger: "axis"
      },
      series: [
        {
          name: '动作前负载率',
          type: 'bar',
          data: data.before_percent,
          itemStyle: {
            color: '#5776a3'
          }
        },
        {
          name: '动作后负载率',
          type: 'bar',
          data: data.after_percent,
          itemStyle: {
            color: '#57a3a0'
          }
        }
      ]
    });
  }
}

watchEffect(() => {
  if (stationData.length !== 0) {
    charts(stationData, waringMessageData)
  }
})


const customHeaderCell = {
  color: '#fff',
  backgroundColor: "#2f4352",
  padding: '10px 0',
  fontSize: '14px',
  border: '1px solid #507e9c'
}

const customCell = {
  color: '#fff',
  padding: '6px 0',
  fontSize: '12px',
  border: '1px solid #507e9c'
}

const getClassName = ({ rowIndex }) => {
  return rowIndex % 2 === 0 ? 'odd-row' : 'even-row'

}

defineExpose({
  charts
})
</script>

<style scoped lang="scss">
.warning-list {
  border: 1px #325265 solid;
  border-radius: 2px;
  height: 90%;
  margin: 0;
  overflow-y: auto;
  padding: 0 0 10px;

  .warning-title {
    height: 40px;
    line-height: 40px;
    padding: 0 14px;
    // background-color: #325265;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 10px;
  }


  .warning-item {
    list-style: none;
    color: #fff;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    padding: 0 14px;
    cursor: pointer;

    span {
      display: inline-block;
      width: 100%;
      /* 继承父元素宽度 */
      height: 100%;
      /* 继承父元素高度 */
      overflow: hidden;
      white-space: nowrap;
      /* 防止换行 */
      text-overflow: ellipsis;
      /* 显示省略号 */
    }
  }
}

:deep(.el-pagination__total) {
  color: #fff !important;
}

:deep(.el-pager li) {
  background: #57a3a0 !important;
  color: #fff;
}

:deep(.el-pagination .btn-prev) {
  background: #57a3a0 !important;
  color: #fff !important;
}

:deep(.el-pagination .btn-next) {
  background: #57a3a0 !important;
  color: #fff !important;
}

:deep(.el-pager li:hover) {
  color: #fff !important;
}

:deep(.el-pager .is-active) {
  background: #07d5c0 !important;
}
</style>
